<template>
    <div class="home">
      <div class="header">
        <a @click="closeWindow"><span class="angle"></span><span>返回</span></a>
        <span>公告</span>
        <span @click="sendNoticeClick()">发公告</span>
      </div>
      <div class="content">
        <div class="tab">
            <div @click="tabClick(index)" :key="index" v-for="(item,index) in tablists" :class="{active:isActive == index,twoDiv:istwoDiv}">{{item}}</div>
        </div>
      <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText">
        <ul class="lists">
          <li v-for="(item,index) in dataLists" @click="detailClick(index)">
            <div>
                <img :src="item.image" alt="">
            </div>
            <div>
                <p class="title">{{item.title | textnumFun}}</p>
                <p class="time">{{item.sendTime | timeFun}}</p>
            </div>
            <div>
                <img @click.stop="delClick(index)" src="/static/img/notice-delete.png" alt="">
            </div>
          </li>
        </ul>
        <div class="no-notice" v-show="dataLists.length == 0">
          <img src="/static/img/no-data.png" alt="">
        </div>
        </v-scroll>
      </div>
      
      <!-- 提示信息 -->
      <div class="tip" v-show="isTip">
        <p>{{tipMessage}}</p>
      </div>
      <!--删除弹出框-->
      <div class="delPopup" v-show="isShowdel">
          <transition name="slide-fade">
              <div class="delContent">
                  <v-deleteBox @ok="okClick" @canle="canleClick" :name="titlenameVal"></v-deleteBox>
              </div>
          </transition>
      </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import Scroll from "./fresh";
import deleteBox from "./cModule/del";
export default {
  data() {
    return {
      // tab页签数组
      tablists: [],
      isActive: 0, //tab是否选中
      dataLists: [], //公告列表
      tipMessage: "服务器错误", //提示信息内容
      isTip: false, //提示信息是否出现
      oid: "7274e24d5deb444fb973b7dd18d7cca2",
      uid: "aeb5e154962341438c02ab5f62601982",
      iState: 0, //往后台穿的未读、已读、已发送识别标志
      downdataLists: [], //上拉更多的数据存放数组
      isShowdel: false, //删除提示框是否出现
      titlenameVal: "确定要删除吗？", //弹出框提示文字
      loadingText: "", //往插件传递的提示文字
      page: 1, //当前页码
      delIndex: "", //删除选中的index值
      istwoDiv: false //判断显示div的个数
      // num: 15, // 一次显示多少条
      // pageStart: 0, // 开始页数
      // pageEnd: 0 // 结束页数
    };
  },
  components: {
    "v-scroll": Scroll,
    "v-deleteBox": deleteBox
  },
  filters: {
    // 过滤时间
    timeFun: function(val) {
      if (val) {
        var standardTime = new Date(val);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return y + "-" + m + "-" + d + " " + h + ":" + f;
      } else {
        return "暂无";
      }
    },
    // 过滤字数
    textnumFun: function(val) {
      if (val) {
        if (val.length > 21) {
          val.substring(0, 21) + "...";
        } else {
          return val;
        }
      }
    }
  },
  created: function() {
    // sessionStorage.setItem('oid',this.$route.query.oid)
    // sessionStorage.setItem('uid',this.$route.query.uid)
    // this.oid = sessionStorage.getItem('oid')
    // this.uid = sessionStorage.getItem('uid')
    this.getIndex();
    this.getlistFun(0);
    
    // this.gettoken()
  },
  watch: {},
  methods: {
    //   关闭窗口
    closeWindow() {
      if (this.isIOS == true) {
        close();
      } else if (this.isIOS == false) {
        window.callAndroid.JsCallandroid();
      }
      window.location.href = "/logout";
    },
    // 判断用户是否有权限
    getIndex() {
      var self = this;
      self
        .getapiIndex({
          oid: self.oid,
          userId: self.uid
        })
        .then(data => {
          if (data.code == "000000") {
            if (data.data) {
              var isNotice = false;
              data.data.forEach(ele => {
                if (ele.appName == "公告") {
                  isNotice = true;
                }
              });
              // 判断是否是管理员做相应处理
              if (isNotice == true) {
                self.tablists = ["未读", "已读", "已发送"];
                self.istwoDiv = false;
              } else {
                self.tablists = ["未读", "已读"];
                self.istwoDiv = true;
              }
            }
          } else {
            self.tipMessage = data.msg;
            self.isTip = true;
            setTimeout(() => {
              self.isTip = false;
            }, 1000);
          }
        })
        .catch(msg => {
          self.tipMessage = "服务器错误";
          self.isTip = true;
          setTimeout(() => {
            self.isTip = false;
          }, 1000);
        });
    },
    // 公告详情
    detailClick(index) {
      var self = this;
      this.$router.push({
        path: "/noticeDetail",
        query: { id: self.dataLists[index].id, fg: "0"}
      });
    },
    // 点击tab切换
    tabClick(index) {
      this.isActive = index;
      this.iState = index;
      this.getlistFun(this.iState);
      document.getElementsByClassName("yo-scroll")[0].scrollTop = 0;
    },
    // 获取公告列表
    getlistFun(m) {
      var self = this;
      self.page = 1;
      self
        .getapinoticenoticeindex({
          current: self.page,
          size: 10,
          oid: self.oid,
          uid: self.uid,
          i: m
        })
        .then(data => {
          if (data.code == "000000") {
            if (data.data) {
              self.dataLists = data.data;
            } else {
              self.dataLists = [];
            }
          } else {
            self.tipMessage = data.msg;
            self.isTip = true;
            setTimeout(() => {
              self.isTip = false;
            }, 1000);
          }
        })
        .catch(msg => {
          self.tipMessage = "服务器错误";
          self.isTip = true;
          setTimeout(() => {
            self.isTip = false;
          }, 1000);
        });
    },
    // 下拉刷新
    onRefresh(done) {
      let self = this;
      self.page = 1;
      self.loadingText = "";
      self
        .getapinoticenoticeindex({
          current: self.page,
          size: 10,
          oid: self.oid,
          uid: self.uid,
          i: self.iState
        })
        .then(data => {
          done();
          if (data.code == "000000") {
            if (data.data) {
              self.dataLists = data.data;
            } else {
              self.dataLists = [];
            }
          } else {
            self.tipMessage = data.msg;
            self.isTip = true;
            setTimeout(() => {
              self.isTip = false;
            }, 1000);
          }
        })
        .catch(msg => {
          done();
          self.tipMessage = "服务器错误";
          self.isTip = true;
          setTimeout(() => {
            self.isTip = false;
          }, 1000);
        });
    },
    // 上拉加载
    onInfinite(done) {
      let self = this;
      if (self.loadingText == "暂无数据") {
        done();
        return;
      } else {
        self.page++;
        self.loadingText = "加载中……";
        self
          .getapinoticenoticeindex({
            current: self.page,
            size: 10,
            oid: self.oid,
            uid: self.uid,
            i: self.iState
          })
          .then(data => {
            done();
            if (data.code == "000000") {
              if (data.data && data.data.length > 0) {
                self.downdataLists = data.data;
                self.dataLists = self.dataLists.concat(self.downdataLists);
              } else {
                self.dataLists = self.dataLists;
                self.loadingText = "暂无数据";
              }
            } else {
              self.tipMessage = data.msg;
              self.isTip = true;
              setTimeout(() => {
                self.isTip = false;
              }, 1000);
            }
          })
          .catch(msg => {
            done();
            self.tipMessage = "服务器错误";
            self.isTip = true;
            setTimeout(() => {
              self.isTip = false;
            }, 1000);
          });
      }
    },
    // 点击删除按钮
    delClick(index) {
      this.isShowdel = true;
      this.delIndex = index;
    },
    // 点击确认删除
    okClick() {
      var self = this;
      self.isShowdel = false;
      self
        .getnoticedelete({
          ids: self.dataLists[self.delIndex].id
        })
        .then(data => {
          if (data.code == "000000") {
            // self.getlistFun(this.iState)
            self.dataLists.splice(self.delIndex, 1);
          } else {
            self.tipMessage = data.msg;
            self.isTip = true;
            setTimeout(() => {
              self.isTip = false;
            }, 1000);
          }
        })
        .catch(msg => {
          self.tipMessage = "服务器错误";
          self.isTip = true;
          setTimeout(() => {
            self.isTip = false;
          }, 1000);
        });
    },
    // 点击取消
    canleClick() {
      this.isShowdel = false;
    },
    // 点击发公告按钮
    sendNoticeClick() {
      if (this.istwoDiv == true) {
        this.tipMessage = "无发公告权限";
        this.isTip = true;
        setTimeout(() => {
          this.isTip = false;
        }, 1000);
      } else {
        this.$router.push({
          path: "/addnoticeFirst"
        });
      }
    },

    ...mapActions(["getapinoticenoticeindex", "getnoticedelete", "getapiIndex"])
  }
};
</script>
<style scoped>
/* 删除弹框 */

.delPopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background: rgba(126, 109, 105, 0.4);
}

.delContent {
  width: 60%;
  height: 10rem;
  background-color: #fff;
  border-radius: 10px;
  margin: calc((100vh - 10rem) / 2) auto;
  z-index: 100000;
}
/* ----------- */
.tip {
  position: fixed;
  width: 21rem;
  height: 4rem;
  background: #000;
  opacity: 0.6;
  z-index: 500;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 0.5rem;
  line-height: 4rem;
  text-align: center;
  color: #fff;
}
.angle {
  border-left: 0.3rem solid #fff;
  border-bottom: 0.3rem solid #fff;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 1.85rem;
  transform: rotate(45deg);
  float: left;
}
.header {
  height: 5rem;
  line-height: 5rem;
  color: white;
  background-color: #fd6162;
  font-weight: normal;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}
.header a {
  float: left;
  margin-left: 1rem;
}
.header > span:nth-of-type(1) {
  font-size: 1.6rem;
}
.header > span:nth-of-type(2) {
  float: right;
  margin-right: 1rem;
}
.tab {
  overflow: hidden;
  margin-top: 5rem;
}
.tab > div {
  float: left;
  width: 33.33333333%;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  text-align: center;
  box-sizing: border-box;
  height: 4rem;
  line-height: 4rem;
}
.tab div:nth-child(3) {
  border-right: none;
}
.active {
  color: #fd6162;
  border-bottom: 2px solid #fd6162 !important;
}
.lists li {
  padding: 1rem 0;
  overflow: hidden;
  border-bottom: 1px solid #e7e7e7;
}

.lists li > div {
  float: left;
  height: 100%;
}

.lists li > div:nth-child(1) {
  text-align: center;
  width: 33.33333333%;
}

.lists li > div:nth-child(1) img {
  width: 10rem;
  height: 7rem;
}

.lists li > div:nth-child(2) {
  width: 44.33333333%;
}

.lists li > div:nth-child(3) {
  width: 22.33333333%;
}

.lists li > div:nth-child(3) img {
  width: 2rem;
  height: 2.1rem;
  margin-top: 1.5rem;
  margin-left: 3.7rem;
}
.title {
  color: rgb(51, 51, 51);
  font-size: 1.5rem;
}

.time {
  font-size: 1.1rem;
  color: #757575;
}
.no-notice {
  margin: 31% auto;
  text-align: center;
}
.no-notice img {
  text-align: center;
  width: 10rem;
  height: 10rem;
}
.twoDiv {
  width: 50% !important;
}
</style>